<template>
    <div class="area-change-page">
        <!-- 标题与介绍 -->
        <ToolHeader :title="title" :subtitle="subtitle"/>

        <div class="content-box">
            <!-- 输入区域 -->
            <div class="input-group">
                <div class="input-item">
                    <span>选择单位：</span>
                    <el-select v-model="selectedUnit" placeholder="请选择单位" style="width: 100%;">
                        <el-option label="平方毫米 (mm²)" value="mm2"/>
                        <el-option label="平方厘米 (cm²)" value="cm2"/>
                        <el-option label="平方分米 (dm²)" value="dm2"/>
                        <el-option label="平方米 (m²)" value="m2"/>
                        <el-option label="平方千米 (km²)" value="km2"/>
                        <el-option label="亩 (mu)" value="mu"/>
                        <el-option label="公顷 (ha)" value="ha"/>
                        <el-option label="平方英尺 (ft²)" value="ft2"/>
                        <el-option label="平方英里 (mi²)" value="mi2"/>
                        <el-option label="平方英寸 (in²)" value="in2"/>
                        <el-option label="英亩 (ac)" value="ac"/>
                    </el-select>
                </div>
                <div class="input-item">
                    <span>输入数值：</span>
                    <el-input v-model="inputValue" placeholder="请输入面积数值"/>
                </div>
            </div>

            <!-- 结果表格 -->
            <el-table
                    :data="areaUnits"
                    border
                    size="small"
                    style="width: 100%;"
            >
                <el-table-column
                        prop="label"
                        label="单位"
                        width="140"
                        :header-cell-style="{ backgroundColor: '#f0f0f0' }"
                        :cell-style="{ backgroundColor: '#f7f7f7', fontWeight: 'bold' }"
                >
                    <template #default="{ row }">
                        {{ row.label }}
                    </template>
                </el-table-column>
                <el-table-column
                        label="数值"
                >
                    <template #default="{ row }">
                        <el-input
                                v-model="row.value"
                                readonly
                                style="width: 100%;"
                        />
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup>
import {ref, onMounted, watch} from 'vue'
import {get, post} from '@/net/index.js'
import {ElMessage} from 'element-plus'
import ToolHeader from '@/components/ToolHeader.vue'
import {debounce} from 'lodash'

// 标题和副标题
const title = ref('')
const subtitle = ref('')

// 选择单位，默认平方米(m2)
const selectedUnit = ref('m2')
// 输入面积值，默认 1
const inputValue = ref('1')

// 表格数据：单位标签和对应值（默认空）
const areaUnits = ref([
    {label: '平方毫米 (mm²)', value: ''},
    {label: '平方厘米 (cm²)', value: ''},
    {label: '平方分米 (dm²)', value: ''},
    {label: '平方米 (m²)', value: ''},
    {label: '平方千米 (km²)', value: ''},
    {label: '亩 (mu)', value: ''},
    {label: '公顷 (ha)', value: ''},
    {label: '平方英尺 (ft²)', value: ''},
    {label: '平方英里 (mi²)', value: ''},
    {label: '平方英寸 (in²)', value: ''},
    {label: '英亩 (ac)', value: ''}
])

// 获取工具信息
function loadInfo() {
    get(
        '/api/mathTool/getInfo?path=area_change',
        (data) => {
            if (data) {
                title.value = data.title || ''
                subtitle.value = data.introduction || ''
            }
        },
        (err) => {
            ElMessage.error('获取工具信息失败：' + err)
        }
    )
}

// 请求后端换算接口，更新表格
const fetchAreaChangeResult = debounce(() => {
    if (!inputValue.value || isNaN(Number(inputValue.value))) {
        ElMessage.warning('请输入有效的数字')
        return
    }

    post(
        '/api/mathTool/getAreaChangeResult',
        {
            type: selectedUnit.value,
            text: inputValue.value
        },
        (res) => {
            if (res) {
                const map = {
                    '平方毫米 (mm²)': 'mm2',
                    '平方厘米 (cm²)': 'cm2',
                    '平方分米 (dm²)': 'dm2',
                    '平方米 (m²)': 'm2',
                    '平方千米 (km²)': 'km2',
                    '亩 (mu)': 'mu',
                    '公顷 (ha)': 'ha',
                    '平方英尺 (ft²)': 'ft2',
                    '平方英里 (mi²)': 'mi2',
                    '平方英寸 (in²)': 'in2',
                    '英亩 (ac)': 'ac'
                }
                areaUnits.value.forEach(unit => {
                    const key = map[unit.label]
                    unit.value = res[key] ?? ''
                })
            }
        },
        (err) => {
            ElMessage.error('面积转换失败：' + err)
        }
    )
}, 500)  // 防抖等待 500ms

onMounted(() => {
    loadInfo()
    fetchAreaChangeResult()
})

// 监听单位或输入数值变化，自动更新结果
watch([selectedUnit, inputValue], () => {
    fetchAreaChangeResult()
})

</script>

<style scoped>
.area-change-page {
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.content-box {
    width: 100%;
    max-width: 30rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.input-group {
    display: flex;
    gap: 1rem;
}

.input-item {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.input-item span {
    margin-bottom: 0.4rem;
    font-weight: 500;
}
</style>